<template>
  <card style="height: 85%">
    <Divider orientation="left">
      应邀参加会议
    </Divider>
    <el-row :gutter="50" type="flex" justify="center" align="middle" style="height: 15%;">
      <el-col :span="12">
        <el-form :model="joinForm" :rules="joinRules" label-width="150px">
          <el-form-item prop="invitationcode" label="会议邀请码:">
            <el-input v-model="joinForm.invitationcode" placeholder="请输入会议邀请码" />
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" style="width: 100%;" @click="handleSearch">
          确定
        </el-button>
      </el-col>
    </el-row>
    <Divider orientation="left">
      会议详情
    </Divider>
    <el-container>
      <el-row v-loading="loading" element-loading-background="rgba(250, 249, 248, 0.9)" type="flex" justify="space-around" class="info" style="height: 80%;">
        <el-col :span="6">
          <p>
            会议室：{{ details.room }}
          </p>
          <p>
            会议预约人：{{ details.sponsorName }}
          </p>
          <p>
            会议开始时间：{{ details.date }}
          </p>
          <p>
            会议主题：{{ details.theme }}
          </p>
        </el-col>
        <el-col :span="6">
          <p>
            会议编号：{{ details.id }}
          </p>
          <p>
            会议人数：{{ details.expectsize }}
          </p>
          <p>
            会议时长：{{ details.timeSize }}
          </p>
          <p>
            会议是否需要签到：{{ details.attendance | isAttendance }}
          </p>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button :type="btnType" :disabled="disabled" style="width: 100%;font-size: 20px;letter-spacing: 1em;" @click="handleJoin">
            加入会<span style="letter-spacing: 0;">
              议
            </span>
          </el-button>
        </el-col>
      </el-row>
    </el-container>
  </card>
</template>

<script>
import Card from '@/components/Card'
import { Divider } from 'iview'
import { parseTime } from '@/utils'
import { findMeetingByCode } from '@/api/meeting'
import { joinMeetingByCode } from '@/api/meetingMember'

export default {
  components: { Card, Divider },
  filters: {
    isAttendance(value) {
      if (!value & value !== 0) return ''
      return value ? '是' : '否'
    }
  },
  data() {
    return {
      loading: false,
      disabled: true,
      btnType: 'info',
      joinForm: {
        invitationcode: this.$route.params.code
      },
      joinRules: {
        invitationcode: [
          { required: true, message: '请输入会议邀请码', trigger: 'blur' }
        ]
      },
      details: {
        id: '',
        theme: '',
        expectsize: undefined,
        starttime: '',
        endtime: '',
        sponsor: '',
        room: '',
        attendance: ''
      }
    }
  },
  methods: {
    async handleSearch() {
      this.loading = true
      const res = await findMeetingByCode(this.joinForm.invitationcode)
      if (res.data.code === 0) {
        this.details = res.data.data
        this.btnType = 'primary'
        this.disabled = false
        this.$notify({
          title: '成功',
          message: '查询成功',
          type: 'success',
          duration: 2000
        })
      }
      this.filterData()
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    filterData() {
      const data = this.details
      // console.log(`data:`, data)
      // this.transformState(data)
      data.date = parseTime(data.starttime, '{h}:{i}')
      data.timeSize = `${(data.endtime - data.starttime) / 60}分钟`
      data.sponsorName = data.sponsorDetail.name
    },
    async handleJoin() {
      // console.log(this.details.id, this.joinForm.invitationcode)
      const res = await joinMeetingByCode(this.details.id, this.joinForm.invitationcode)
      if (res.data.code === 0) {
        this.$notify({
          title: '成功',
          message: '加入成功',
          type: 'success',
          duration: 2000
        })
      } else {
        this.$notify({
          title: '失败',
          message: res.data.msg,
          type: 'error',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style scoped>
.ivu-divider {
  font-size: 24px;
  font-weight: 400;
  margin-top: 1em;
  padding-left: 2em;
  padding-right: 2em;
}

.ivu-divider:before,
.ivu-divider:after {
  border-top-color: #F3AC8E;
}

.el-form-item {
  margin-bottom: 0;
}

.el-form-item >>> label,
.el-form-item >>> .el-input
 {
  font-size: 20px;
}

.el-container {
  height: 57%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.info .el-col {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.info .el-col p {
  font-size: 20px;
  text-align: left;
  font-weight: 400;
}
</style>
